* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: lighten(@color-primary, 20%);
}

ul,
ol,
dl,
li {
  list-style: none;
}

h1,
h2,
h3 {
  font-style: normal;
  font-weight: normal;
}

a,
a:hover {
  text-decoration: none;
}

a,
input,
img {
  display: block;
}

@imgTypes: {
  contain: contain;
  cover: cover;
  fill: fill;
};
each(@imgTypes, {
  img[mode="@{key}"]{
    width: 100%;
    height: 100%;
    object-fit: @value;
  }
});

.flex {
  display: flex !important;
  &-sc {
    justify-content: center !important;
  }
  &-cc {
    align-items: center !important;
  }
  &-center {
    justify-content: center !important;
    align-items: center !important;
  }
  &-fe {
    justify-content: flex-end;
  }
  &-sb {
    justify-content: space-between;
  }
}

@spaces: {
  0: 0px;
  8: 8px;
  10: 10px;
  20: 20px;
};

each(@spaces,{
  .m-@{key}{
    margin: @value !important;
  }
  .m-t-@{key}{
    margin-top: @value !important;
  }
  .m-r-@{key}{
    margin-right: @value !important;
  }
  .m-b-@{key}{
    margin-bottom: @value !important;
  }
  .m-l-@{key}{
    margin-left: @value !important;
  }
  .m-tb-@{key}{
    margin-top: @value !important;
    margin-bottom: @value !important;
  }
  .m-lr-@{key}{
    margin-left: @value !important;
    margin-right: @value !important;
  }
  .p-@{key}{
    padding: @value !important;
  }
  .p-t-@{key}{
    padding-top: @value !important;
  }
  .p-r-@{key}{
    padding-right: @value !important;
  }
  .p-b-@{key}{
    padding-bottom: @value !important;
  }
  .p-l-@{key}{
    padding-left: @value !important;
  }
  .p-tb-@{key}{
    padding-top: @value !important;
    padding-bottom: @value !important;
  }
  .p-lr-@{key}{
    padding-left: @value !important;
    padding-right: @value !important;
  }
});

.text-center {
  text-align: center;
}

@widths: {
  fill: 100%;
  300: 300px;
};

each(@widths,{
  .w-@{key}{
    width: @value !important;
  }
});

.relative {
  position: relative;
}
